const createValueSetter = (field: string) => {
  return {
    get({ data }) {
      return data[field]
    },
    set({ data }, value: string) {
      data[field] = value
    }
  }
}
export default {
  '@init'({ style }) {
    style.width = 800
    style.height = 600
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': {
    style: {
      title: '样式',
      items: [
        {
          type: 'style',
          options: {
            defaultOpen: true,
            plugins: ['border', 'font', 'bgcolor']
          },
          value: {
            get: ({ data }) => {
              return data.style
            },
            set: ({ data }, value) => {
              data.style = value
            }
          }
        }
      ]
    },
    items: [
      {
        items: [
          {
            title: '文字标题',
            type: 'text',
            value: createValueSetter('largTitle')
          }
        ]
      },
      {
        title: 'x轴设置',
        items: [
          {
            title: '显示x轴标题',
            type: 'Switch',
            value: createValueSetter('showXAxisName')
          },
          {
            title: 'x轴标题',
            type: 'text',
            ifVisible({ data }: any) {
              return data.showXAxisName
            },
            value: createValueSetter('xAxisName')
          }
        ]
      },
      {
        title: 'y轴设置',
        items: [
          {
            title: '显示y轴标题',
            type: 'Switch',
            value: createValueSetter('showYAxisName')
          },
          {
            title: 'y轴标题',
            type: 'text',
            ifVisible({ data }: any) {
              return data.showYAxisName
            },
            value: createValueSetter('yAxisName')
          }
        ]
      },
      {
        title: '数据列设置',
        items: [
          {
            title: '图例排列',
            type: 'Select',
            options: [
              { value: 'horizontal', label: '横向' },
              { value: 'vertical', label: '纵向' }
            ],
            value: createValueSetter('legendOrient')
          },
          {
            title: '数据列',
            type: 'Array',
            options: {
              addText: '添加数据列',
              editable: true,
              draggable: false,
              getTitle(item: any) {
                return `${item.name}`
              },
              onAdd() {
                return { name: '新建数据列', field: 'field_1' }
              },
              items: [
                {
                  title: '数据列名称',
                  type: 'text',
                  value: 'name',
                  options: {
                    placeholder: '数据列名称'
                  }
                },
                {
                  title: '数据列字段',
                  type: 'text',
                  value: 'field',
                  options: {
                    placeholder: '数据列字段'
                  }
                }
              ]
            },
            value: {
              get({ data }: any) {
                return data.columns
              },
              set({ data, output }: any, val: any) {
                data.columns = val
              }
            }
          }
        ]
      },
      {
        title: '区域选择',
        type: '_Event',
        options: {
          outputId: 'areaChange'
        }
      }
    ]
  }
}
